<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--  位置数据  -->
      <el-col :span="4" :xs="24">
        <div>
          <p class="title">广告投放位置</p>
        </div>

        <el-tree
          ref="tree"
          :data="adAddrList"
          :props="defaultProps"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="20" :xs="24">
        <!--按钮-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:user:add']"
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:user:remove']"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:user:import']"
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
            >导入
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:user:export']"
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
            >导出
            </el-button>
          </el-col>
          <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="getList" />
        </el-row>
        <el-table v-loading="loading" :data="adStrategy.ads" @selection-chang="handleSelectionChange">
          <el-table-column type="selection" align="center" width="50" />
          <el-table-column type="index" align="center" width="50" />
          <el-table-column key="name" label="广告名称" align="center" prop="name" />
          <el-table-column key="startTime" label="投放时间" align="center" prop="startTime" />
          <el-table-column key="endTime" label="结束时间" align="center" prop="endTime" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改
              </el-button>
              <el-button
                v-hasPermi="['system:dept:remove']"
                size="mini"
                type="text"
                icon="el-icon-delete"
              >删除
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-more"
              >内容
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-s-data"
              >统计数据
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--  新增单条广告投放  -->
    <el-dialog
      title="新增广告"
      :visible.sync="addDialog"
      width="50%"
    >
      <el-form :model="addAd" label-width="68px" :inline="true">
        <el-form-item label="广告名称" prop="name">
          <el-dropdown @command="selectAd">
            <el-input v-model="addAd.name"><i class="el-icon-arrow-down el-icon--right" /></el-input>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="ad in adList" :command="ad.name">{{ ad.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adAddrList, adStrategy, adList } from './adData'

export default {
  name: 'Management',
  data() {
    return {
      loading: false,
      adAddrList: [],
      adStrategy: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 添 加
      addDialog: false,
      adList: [],
      addAd: {
        name: '',
        dataRange: []
      }
    }
  },
  created() {
    this.getAdAddrList()
    this.getAdStrategy()
  },
  methods: {
    // 新增 选择广告后的回调
    selectAd(name) {
      this.addAd.name = name
    },
    // 给投放规则组新增广告
    handleAdd() {
      // 打开新增对话框
      this.addDialog = false
      // 获取广告列表
      this.adList = adList
    },
    // 获取广告位置列表
    getAdAddrList() {
      this.adAddrList = adAddrList
    },
    // 多选用于批量禁用
    handleSelectionChange() {

    },
    // 点击位置显示广告列表
    handleNodeClick() {

    },

    // 获得时间段列表
    getAdStrategy() {
      this.adStrategy = adStrategy[0]
    }
  }
}
</script>

<style>
  .title {
    text-align: center;
    font-weight: bold;
  }
</style>
